<template>
	<view class="search">
		<uni-popup :show="popupOptions.show" :title="popupOptions.title" position="full" height="80%"  @hidePopup="close()" >
			<view class="weui-after-line" style="width: 100%;padding:20upx 0px;">
				<input placeholder="请输入关键字进行搜索" v-model="searchKey" style="font-weight: bold;" />
			</view>
			<scroll-view :scroll-y="true" class="search-scroll-view" style="height: calc(100% - 170upx)">
				<view class="weui-cells" style="margin-top: 0px;">
					<view class="weui-cell" v-for="(item,index) in getItems" @click="clickItem(item)">
						<view class="weui-cell__bd">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
		
    export default {
		components: { uniPopup },
		name: 'head-filter',
		props: {
			title:{
				type: String,
				default:""
			},
			items:{
				type: Array,
				default: function(e) {
				    return []
				}
			}
		},
		data() {
			return {
				searchKey:"",
				popupOptions:{
					show:false,
					title:"",
				}
			}
		},
		created() {
			
		},
		// watch: {
		//    searchKey: {
		// 		handler(newVal) {
		// 		    
		// 		},
		// 		deep: true
		//    }
		// },
		methods: {
			// filter(name){
			// 	if(this.searchKey==""){
			// 		console.log("aa");
			// 		return true;
			// 	}
			// 	if(name.toString().lastIndexOf(this.searchKey)>-1){
			// 		return true;
			// 	}else{
			// 		return false;
			// 	}
			// },
			show(){
				this.popupOptions.title = this.title;
				this.popupOptions.show = true;
			},
			close(){
				this.popupOptions.show = false;
			},
			clickItem(item){
				this.$emit('change',item.value );
				this.popupOptions.show = false;
			}
		},
		computed: {
			getItems() {
				var th = this;
				if(this.searchKey==""){
					return this.items;
				}else{
					var newItems = new Array();
					
					this.items.forEach(function(item,index){
						if(item.name.toString().lastIndexOf(th.searchKey)>-1){
							newItems.push(item);
						}
					});
					return newItems;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.search{
		.weui-after-line:after{
			left: 0px;
		}
		.weui-cell{
			padding-left: 0px;
			padding-right: 0px;
		}
		.weui-cell:after{
			left: 0px;
		}
	}
</style>
